<template>
	<view class="content">
		<view class="modify_list">
			<!-- 旧手机号 -->
			<view class="old_phone">
				<text style="margin-right: 80rpx;">原手机号</text>
				<text>{{old_moblie}}</text>
			</view>
			<!-- 新手机号 -->
			<view class="new_phone modify_item">
				<text>新手机号</text>
				<input type="text" placeholder="请输入新的手机号" v-model="new_moblie">
			</view>
			<!-- 输入验证码 -->
			<view class="verification modify_item">
				<text>输入验证码</text>
				<input type="text" placeholder="请输入验证码" v-model="code"/>
				<view @click="getCode">{{countdown}}</view>
			</view>
			<!-- 确认按钮 -->
			<view class="confirm" @click="confirm">
				确 认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdown: '获取验证码',
				time: '',
				old_moblie:'',
				new_moblie:'',
				code:'',
			};
		},
		onLoad(){
			var that=this;
			that.ajax({
				url:'api/user/getUserInfo',
				success:function(res){
					console.log(res)
					that.old_moblie=res.data.mobile;
							
				}
			  })
					 
		},
		methods: {
			getCode() { 
				var that=this;
				// 如果已经是获取倒计时,就不再重新计时
				if (this.countdown !== '获取验证码') {
					return
				} else {
					that.ajax({
						url:'api/common/getMobileCaptcha',
						data:{
							mobile:that.new_moblie,
							type:1
						},
						success:function(res){
							console.log(res)
							if(res.code==200){
								let num = 60
								clearInterval(that.time)
								that.time = setInterval(() => {
									num--
									if (num == 0) {
										that.countdown = '获取验证码'
										clearInterval(that.time)
									}else{
										that.countdown = num+'秒'
									}
								}, 1000)
							}else{
								uni.showToast({
										title:"" + res.msg,
										icon:'none'
								});
							}
						}
					  })

				}

			},
			confirm(){
				var that=this;
				that.ajax({
					url:'api/user/changeMoblie',
					data:{
						new_moblie:that.new_moblie,
						old_moblie:that.old_moblie,
						code:that.code,
					},
					success:function(res){
						if(res.code==200){
							uni.showToast({
								title:"修改成功,请重新登录",
								icon:'none'
							});
							uni.removeStorage({
							    key: 'token',
							    success: function (res) {
							       // console.log('success');
							    }
							});
							setTimeout(() => {
								uni.navigateTo({
									url:'../login/loginWx'
								})
							}, 1000)
							
						}else{
							uni.showToast({
								title:"" + res.msg,
								icon:'none'
							});
						}
								
					}
				  })
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		// padding: 0 30rpx;
		background-color: #F7F9FB;
	}

	.modify_list {
		view {
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #666;
			height: 118rpx;
			line-height: 118rpx;

			& text {
				width: 200rpx;
			}

			& input {
				flex: 1;
				margin: auto 0;
				font-size: 26rpx;
			}

			& view {
				margin: auto 0;
				width: 229rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				background-color: #FBA12D;
				border-radius: 30rpx;
				padding: 0;
			}
		}

		.modify_item {
			padding: 0 30rpx;
			display: flex;
			background-color: #fff;
			border-bottom: 1rpx solid #ccc;
		}

		// 确认按钮
		.confirm {
			margin: 0 30rpx;
			margin-top: 300rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			background-color: #2AABAD;
			border-radius: 45rpx;
		}
	}
</style>
